<template>
  <div>
    <van-row @click="openModal">
      <van-col span="6">
        <img
          :src="avatarSrc"
          alt
        />
      </van-col>
      <van-col span="15">{{ nickname }}</van-col>
      <van-col span="3">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-grid
      :column-num="3"
      square
    >
      <van-grid-item
        icon="photo-o"
        text="文字"
      />
      <van-grid-item
        icon="photo-o"
        text="文字"
      />
      <van-grid-item
        icon="photo-o"
        text="文字"
      />
      <van-grid-item
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    <!-- 淡入 -->
    <transition name="van-fade">
      <!-- <div v-show="visible">Fade</div> -->

      <div
        class="login-modal"
        v-show="isShowModal"
      >
        <div
          class="close-modal"
          @click="isShowModal=!isShowModal"
        >
        </div>
        <van-form
          @submit="onSubmit"
          class="login-form"
        >
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button
              round
              block
              type="info"
              native-type="submit"
            >提交</van-button>
          </div>
        </van-form>
      </div>
    </transition>
  </div>
</template>

<script>
import { GoLogin } from "@/request/api.js";

export default {
  data() {
    return {
      avatarSrc: require("@/assets/avatar.png"),
      username: "",
      password: "",
      isShowModal: false,
      nickname: "用户登录",
    };
  },
  created() {
    // 组建刚创建的时候 需要判断用户是否登录 获取localStorage里面有没有token
    // 如果有token 就表示登录 填上用户信息
    let token = localStorage.getItem("token");
    if (token) {
      // console.log("token", token);
      // 说明已经登录成功  把用户信息渲染到页面上
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.nickname = userInfo.nickname;
      this.avatarSrc = userInfo.avatar;
    }
  },
  methods: {
    openModal() {
      // 判断用户是否登录
      let token = localStorage.getItem("token");
      if (token) {
        return;
      } else {
        this.isShowModal = !this.isShowModal;
      }
    },
    onSubmit(values) {
      console.log("username", values["用户名"]);
      console.log("pwd", values["密码"]);
      // values 是一个对象 里边有用户名：'', 密码：''
      let username = values["用户名"];
      let pwd = values["密码"];
      GoLogin({
        username,
        pwd,
      }).then((res) => {
        if (res.errno == 0) {
          console.log("res:", res.data);
          // 登录成功
          // 登录的业务逻辑
          // 1、提示框提示登录成功
          this.$toast("登陆成功");
          // 2、把token保存到本地存储
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
          // 3、1s后关闭模态窗口
          setTimeout(() => {
            this.isShowModal = !this.isShowModal;
            // 4、把拿到的userInfo用户信息，填写到页面上
            this.nickname = res.data.userInfo.nickname;
            this.avatarSrc = res.data.userInfo.avatar;
          }, 1000);
        }
        // console.log("res", res);
      });
    },
    // isShowModal() {
    //   isShowModal = true;
    // },
  },
};
</script>
 
<style lang = "less" scoped>
.login-modal {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  .login-form {
    width: 90%;
    background-color: #fff;
    padding-bottom: 1rem;
    position: absolute;
    left: 50%;
    top: 35%;
    margin-left: -45%;
  }
  .close-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.van-row {
  padding: 1.7rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 2.7rem;
    font-size: 1rem;
    img {
      width: 3rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
</style>